<template>
  <div class="realHeader">
    <h2><p class="nowTime">{{nowTime}}</p><span>{{company_name}}客流管理驾驶舱</span></h2>
    <slot></slot>
    <div class="condit">
      <div>
        <span>企业选择</span>
        <el-cascader
          :key="key"
          :options="options"
          class="real-head"
          v-model="company_id_arr"
          :placeholder="'选择所属企业'"
          :show-all-levels="true"
          collapse-tags
          :props="{
            multiple:'true',
            expandTrigger:'hover',
           }"
          clearable
          size="small"
          popper-class="company-cascader"
          @visible-change="companyVisibleChange"
          @remove-tag="companyRemoveTag"
          @change="companysChange"
          style="width: 260px;margin-top:20px"
        >
        </el-cascader>
      </div>
      <div>
        <span>案场选择</span>
        <el-select v-model="submitCase"
                   @change="caseChange"
                   @visible-change="CaseVisibleChange"
                   @remove-tag="CaseRemoveTag"
                   filterable class="real-head"
                   popper-class="real-case"
                   collapse-tags
                   :multiple="true"
                   size="small"
                   :clearable="true"
                   placeholder="请选择位置"
                   style="width:260px;margin-top:20px">
          <el-option
            v-for="item in Case"
            :key="item.id"
            :label="item.case_name"
            :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div>
        <span>日期选择</span>
        <el-date-picker
          class="realDate"
          v-model="datetimeval.day"
          type="daterange"
          align="right"
          size="small"
          popper-class="real-date"
          unlink-panels
          :clearable="false"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          :picker-options="pickerOptions"
          @change="dayChange"
          style="width:280px;margin-top:20px"
        >
        </el-date-picker>
      </div>
      <div>
        <el-button v-show="isUpdata" size="small" class="realHead-btn" @click="saveAssembly">保存配置</el-button>
        <el-button v-show="isUpdata" size="small" class="realHead-btn" @click="cancelAssembly">取消更改配置</el-button>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
  .realHeader {
    h2 {
      text-align: center;
      height: 74px;
      width: 100%;
      background: url("/static/img/cockpik/headtitle.png") no-repeat;
      background-size: 100% 100%;
      margin-bottom: 12px;
      position: relative;

      span {
        color: #4395fa;
        font-size: 28px;
        padding-left: 4px;
        letter-spacing: 2px;
        line-height: 74px;
        font-family: '黑体';
        position: relative;

        &::after, &::before {
          content: '';
          width: 262px;
          height: 23px;
          position: absolute;
          display: block;
          top: 50%;
          transform: translateY(-50%);
        }

        &::after {
          right: 110%;
          background: url("/static/img/cockpik/h2_left.png") no-repeat;
        }

        &::before {
          left: 110%;
          background: url("/static/img/cockpik/h2_right.png") no-repeat;
        }

      }

      .nowTime {
        position: absolute;
        right: 3%;
        top: 50%;
        transform: translateY(-50%);
        color: #4398f6;
        line-height: 1.1;
        font-size: 16px;
        font-weight: 400;
      }
    }

    .condit {
      width: 100%;
      margin-bottom: 20px;
      padding-left: 13px;

      > div {
        display: inline-block;
        line-height: 30px;
        margin-right: 30px;
        background-size: 100% 100%;

        > span {
          font-size: 16px;
          color: #3a86da;
          line-height: 30px;
        }
      }
    }

    .realHead-btn {
      color: #4485c8;
      background: #092752;
      border: 1px solid #032457;
      margin-top: 20px;
    }

    .realHead-btn:focus {
      color: #8ac8ff;
      background: #16468a;
      border: 1px solid #16468a
    }

    .realHead-btn:hover {
      color: #8ac8ff;
      background: #16468a;
      border: 1px solid #16468a
    }

    .realHead-btn:active {
      color: #8ac8ff;
      background: #16468a;
      border: 1px solid #16468a
    }
  }

  .real-date.el-picker-panel {
    transform: translateX(128px);
    color: #4398f6;
    background: #0c2c5c;
    border-color: #083169;

    .el-picker-panel__sidebar {
      right: 0;
      width: 180px;
      text-align: center;
      background: #0c2c5c;
      border-color: #0c2c5c;

      &::-webkit-scrollbar {
        width: 8px;
        height: 8px;
        //scrollbar-arrow-color: red;
      }

      /*定义滚动条轨道 内阴影+圆角*/
      &::-webkit-scrollbar-track {
        box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
        background: #0c2c5c;
        border-radius: 6px;
      }

      /*定义滑块 内阴影+圆角*/
      &::-webkit-scrollbar-thumb {
        border-radius: 6px;
        box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
        background: #3777bc;
        //scrollbar-arrow-color: red;
      }

      &::before {
        content: "快速选择";
        width: 90%;
        height: 32px;
        margin: 8px 0;
        display: inline-block;
        font-size: 14px;
        line-height: 32px;
        border-radius: 3px;
        color: #03070d;
        background: #5693e5;
        text-align: center;
      }

      .el-picker-panel__shortcut {
        text-align: center;
        display: inline-block;
        background: #0f3876;
        color: #3279cb;
        padding: 0;
        width: 40%;
        margin: 5px;

        &:hover {
          background: #5580ff;
          color: #fff;
        }
      }
    }

    .el-picker-panel__body {
      margin: 0 180px 0 0;

      .el-picker-panel__content {
        &.is-left {
          border-right-color: #113a6a;
        }

        .el-date-range-picker__header {
          .el-picker-panel__icon-btn {
            color: #5693e5;

            &:hover {
              color: #dde7f9;
            }

            &.is-disabled {
              color: #295990;
            }
          }
        }

        .el-date-table {
          th {
            color: #3777bc;
            border-color: #113a6a;
          }

          .el-date-table__row {
            .today {
              span {
                color: #afd1ff;
                text-decoration: underline;
                font-weight: 400;
              }

              &.in-range {
                span {
                  color: #fff;
                  font-weight: 700;
                }
              }
            }

            .disabled {
              > div {
                background: #041e49;
                color: #294e8a;
              }
            }

            .in-range {
              > div {
                background: #021940;
              }
            }

            .prev-month, .next-month {
              color: #2f589b;
            }
          }
        }
      }
    }

    .popper__arrow {
      border-bottom-color: #0c2c5c !important;
      border-top-color: #0c2c5c !important;

      &::after {
        border-bottom-color: #0c2c5c !important;
        border-top-color: #0c2c5c !important;
      }
    }
  }

  .realDate.el-date-editor {
    background: #0c2c5c;
    border-color: #032457;

    &.is-active {
      border-color: #6689f1;
    }

    .el-range-input {
      background: transparent;
      color: #4194ee;
      font-size: 16px;
    }

    > span {
      color: #4398f6;
      padding: 0;
    }

    .el-icon-date {
      color: #4398f6;
    }
  }

  .real-head.el-cascader, .el-select.real-head {
    .el-input__inner {
      background: #092752;
      color: #3983d6;
      border: 1px solid #032457;

      &::-webkit-input-placeholder {
        color: #224e82;
      }

      &::-moz-placeholder {
        color: #224e82;
      }

      &:-ms-input-placeholder {
        color: #224e82;
      }

      &:-moz-placeholder {
        color: #224e82;
      }
    }

    .el-input__suffix {
      .el-select__caret {
        color: #204c7f;
      }
    }

    .el-select__tags {
      .el-tag {
        background: transparent;
        color: #5aa7fc;
        border: none;

        .el-tag__close {
          background: #244382;
          color: #fff;

          &:hover {
            background: #5286f1;
          }
        }
      }
    }

    .el-cascader .el-input .el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner {
      border: 1px solid #374f96
    }

    .el-cascader__tags {
      .el-tag--info {
        color: #5aa7fc;
      }

      .el-tag {
        background: #0c2c5c;

        .el-tag__close.el-icon-close {
          background: #244382;
        }

        .el-icon-close:hover {
          background: #5286f1;
        }
      }
    }

    .el-input__icon.el-icon-arrow-down {
      color: #19497d;
    }
  }

  .company-cascader.el-cascader__dropdown {
    background: #0c2c5c;
    border: 1px solid #06326d;

    .el-cascader-menu {
      color: #3b75b3;
      border: solid 1px #06326d;

      .el-cascader-menu__wrap {
        &::-webkit-scrollbar {
          width: 16px;
          height: 16px;
          //scrollbar-arrow-color: red;
        }

        /*定义滚动条轨道 内阴影+圆角*/
        &::-webkit-scrollbar-track {
          box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          background: #0c2c5c;
          border-radius: 10px;
        }

        /*定义滑块 内阴影+圆角*/
        &::-webkit-scrollbar-thumb {
          border-radius: 10px;
          box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          background: #0c2c5c;
          //scrollbar-arrow-color: red;
        }
      }
    }

    .el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover {
      background: #041e49;
      color: #5aa7fc;
    }

    .el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {
      color: #5aa7fc;
    }

    .el-checkbox__inner {
      background: #0c2c5c;
      border: 1px solid #244382;
    }

    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: #1b4496;
      border-color: #1b4496;
      color: #4f9dfb;
    }

    .popper__arrow {
      border-bottom-color: #0c2c5c !important;
      border-top-color: #0c2c5c !important;

      &::after {
        border-top-color: #0c2c5c !important;
        border-bottom-color: #0c2c5c !important;
      }
    }
  }

  .real-case.el-select-dropdown {
    background: #0c2c5c;
    border-color: #083169;

    .el-scrollbar {
      .el-select-dropdown__wrap {
        &::-webkit-scrollbar {
          width: 16px;
          height: 16px;
          //scrollbar-arrow-color: red;
        }

        /*定义滚动条轨道 内阴影+圆角*/
        &::-webkit-scrollbar-track {
          box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          background: #0c2c5c;
          border-radius: 10px;
        }

        /*定义滑块 内阴影+圆角*/
        &::-webkit-scrollbar-thumb {
          border-radius: 10px;
          box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          background: #0c2c5c;
          //scrollbar-arrow-color: red;
        }

        .el-scrollbar__view {
          li.el-select-dropdown__item {
            color: #3b75b3;

            &.is-disabled {
              color: #244f85;

              &.hover {

                background: transparent;
              }
            }

            &.hover {
              background: #041e49;
            }

            &.selected {
              background: transparent;
              color: #5aa7fc;

              &.hover {
                background: #041e49;
              }
            }
          }
        }
      }
    }

    .popper__arrow {
      border-bottom-color: #0c2c5c !important;
      border-top-color: #0c2c5c !important;

      &::after {
        border-bottom-color: #0c2c5c !important;
        border-top-color: #0c2c5c !important;
      }
    }
  }

  @media screen and (max-width: 1440px) {
    .realHeader h2 span {
      font-size: 22px;
    }
    .realHeader h2 .nowTime {
      font-size: 12px;
    }
  }

</style>
<script>
  let moment = require("moment");
  import Cascader from "@/components/sys/assembly/elcascader"; //级联选择器
  export default {
    props: {
      isUpdata: false,
    },
    data() {
      return {
        nowTime: '', //现在时间;
        companyData: [],//
        company_name: '',  //公司名称
        company_id_arr: [],   //所属企业选中id
        options: [],         //级联控件 所属企业
        Case: [],     //案场列表
        submitCase: [],   //案场选中参数
        refreshTime: null, //当前在时间函数
        pickerOptions: {                //日期控件规则
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6;
          },
          shortcuts: [
            {
              text: "今天",
              onClick(picker) {
                const start = moment().format("YYYY-MM-DD");
                const end = moment().format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "昨天",
              onClick(picker) {
                const start = moment()
                .subtract(1, "days")
                .format("YYYY-MM-DD");
                const end = moment()
                .subtract(1, "days")
                .format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "前天",
              onClick(picker) {
                const start = moment()
                .subtract(2, "days")
                .format("YYYY-MM-DD");
                const end = moment()
                .subtract(2, "days")
                .format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "上周同日",
              onClick(picker) {
                const start = moment()
                .subtract(1, "weeks")
                .format("YYYY-MM-DD");
                const end = moment()
                .subtract(1, "weeks")
                .format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "上月同日",
              onClick(picker) {
                const start = moment()
                .subtract(1, "months")
                .format("YYYY-MM-DD");
                const end = moment()
                .subtract(1, "months")
                .format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "本周",
              onClick(picker) {
                const weekOfday = moment().format("E"); //计算今天是这周第几天
                const start = moment()
                .subtract(weekOfday - 1, "days")
                .format("YYYY-MM-DD");
                const end = moment().format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "上一周",
              onClick(picker) {
                const start = moment()
                .week(moment().week() - 1)
                .startOf("week")
                .subtract(-1, "days")
                .format("YYYY-MM-DD");
                const end = moment()
                .week(moment().week() - 1)
                .endOf("week")
                .subtract(-1, "days")
                .format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "本月",
              onClick(picker) {
                const start = moment().month(moment().month()).startOf("month").format("YYYY-MM-DD");
                const end = moment().format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "上一月",
              onClick(picker) {
                const start = moment()
                .month(moment().month() - 1)
                .startOf("month")
                .format("YYYY-MM-DD");
                const end = moment()
                .month(moment().month() - 1)
                .endOf("month")
                .format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "本年度",
              onClick(picker) {
                const start = moment()
                .year(moment().year())
                .startOf("year")
                .format("YYYY-MM-DD");
                const end = moment().format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "上一年",
              onClick(picker) {
                const start = moment()
                .year(moment().year() - 1)
                .startOf("year")
                .format("YYYY-MM-DD");
                const end = moment()
                .year(moment().year() - 1)
                .endOf("year")
                .format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
          ],
        },
        datetimeval: {
          day: [moment(new Date()).format("YYYY-MM-DD"), moment(new Date()).format("YYYY-MM-DD")],
          hm: ['00:00', '23:59']
        },
        realHeaderData: {
          company_ids: '',//企业id
          case_ids: '',//案场id
          allCase_ids: '',//全部案场id
          idsType: 0,//企业或案场标记：0：为只选择了企业id，1：为选择了案场id
          start_day: moment(new Date()).format("YYYY-MM-DD"),
          end_day: moment(new Date()).format("YYYY-MM-DD"),
        },
        key:1
      }
    },
    components: {
      Cascader,
    },
    created() {},
    mounted() {
      this.$Bus.$on('companyData', data => {
        // console.log(data,'从header拿到data数据渲染企业列表');
        this.companyData=[];
        this.company_id_arr=[];
        this.companyData = Array.of(data)
        this.getReady()
      })
      //拿到企业
      this.getNowTime();
      this.refreshTime = setInterval(() => {
        this.getNowTime();
      }, 1000);
    },
    beforeDestroy() {
      this.$Bus.$off('companyData')
      clearInterval(this.refreshTime);
      this.refreshTime=null;
    },
    methods: {
      //获取企业信息
      getReady() {
        this.key++
        recursion(this.companyData);
        function recursion(val) {
          if (val.length) {
            for (let i in val) {
              val[i].value = val[i].id;
              val[i].label = val[i].company_name;
              val[i].parent_id_str = val[i].parent_name_list ? val[i].parent_name_list.join('/') : '';
              if (val[i].children && val[i].children.length) {
                recursion(val[i].children)
              } else {
                delete val[i].children
              }
            }
          }
        }

        this.$nextTick(() => {
          let arr = [];//arr数组数据格式是把node_location的改成数组形式
          recursionData(Array.of(this.companyData[0]))
          function recursionData(val) {
            if (val.length) {
              for (let i in val) {
                if (val[i].children) {
                  recursionData(val[i].children)
                } else {
                  arr.push(val[i].node_location.split('-').slice(0, -1))
                  delete val[i].children
                }
              }
            }
          }

          // console.log(arr, 'node_location的改成数组形式')
          let company_id_arr = [];//配置当前第一个选中的值
          arr.map(x => {
            for (let i = 0; i < x.length; i++) {
              if (x[i] == this.companyData[0].id) {
                company_id_arr.push(x.slice(i, x.length))
              }
            }
          });
          // console.log(company_id_arr,'company_id_arr');
          this.options = this.companyData;
          this.company_name = this.companyData[0].company_name;
          this.$nextTick(() => {
            this.company_id_arr = company_id_arr;
            this.realHeaderData.company_ids = company_id_arr.join(',')
            this.realHeaderData.idsType = 0;
            this.getCase(company_id_arr.map(x => x.slice(-1)[0]));
          })
        })
      },

      //企业选择改变
      companysChange(val) {
        // console.log(val);
        if (!val.length) this.companyChange()
      },
      companyVisibleChange(val) {
        if (!val) this.companyChange()
      },
      //移除tag时触发
      companyRemoveTag(val) {
        this.$nextTick(() => {
          // console.log(this.company_id_arr);
          if (this.company_id_arr.length) this.companyChange()
        })
      },

      //企业选择改变
      companyChange() {
        this.$Bus.$emit('Loading', true);
        let company_id_arr = this.company_id_arr.map(x => {
          return x.slice(-1)[0]
        });
        this.realHeaderData.company_ids = company_id_arr.join(',')
        this.realHeaderData.idsType = 0;
        this.realHeaderDataChange()
        this.getCase(company_id_arr)
      },
      //案场change事件
      caseChange(val) {
        if (val[0] == 'all' && val.length != 1) {
          this.submitCase = this.submitCase.filter(x => x != 'all')
        } else if (val.includes('all')) {
          this.submitCase = ['all'];
        }
      },
      //案场选择改变
      CaseVisibleChange(val) {
        if (!val) this.CaseChange()
      },
      CaseRemoveTag() {
        this.CaseChange();
      },
      CaseChange() {
        if (this.submitCase == 'all') {
          this.realHeaderData.case_ids = this.submitCase
          this.realHeaderData.idsType = 0
        } else {
          this.realHeaderData.case_ids = this.submitCase.join(',')
          this.realHeaderData.idsType = this.submitCase.length ? 1 : 0
        }
        this.realHeaderDataChange()
      },

      //日期选择改变
      dayChange(val) {
        this.realHeaderData.start_day = val[0]
        this.realHeaderData.end_day = val[1]
        this.realHeaderDataChange()
      },
      //头部选择数据变化
      realHeaderDataChange() {
        this.$Bus.$emit('realHeaderDataChange', this.realHeaderData);
      },
      //获取案场列表
      getCase(company_id_arr, org_type = 1) {
        this.Case = [];
        this.submitCase = [];
        if (company_id_arr.length == 0) {
          this.$Bus.$emit('Loading', false);
          return
        }
        let url = '/sys/report_assist_new/case_list'
        let params = {
          org_id_list: company_id_arr,
          org_type: org_type
        }
        this.$api.post(url, params).then(data => {
          if (data) {
            if (data.data) {
              this.Case = data.data;
              this.realHeaderData.allCase_ids = data.data.map(x => x.id);
              this.Case.unshift({case_name: '全部', id: 'all'});
              this.realHeaderData.idsType = 0
              this.realHeaderDataChange()
              this.$nextTick(()=>{
                this.submitCase = ['all'];
              })
            } else {
              this.realHeaderData.allCase_ids = [];
              this.realHeaderDataChange();
              this.$message.warning('该企业下无案场!');
            }
          } else {
            this.$message.warning('该企业下无案场!');
          }
          this.$Bus.$emit('Loading', false);
        })
        .catch(err => {
           console.log(err);
          this.$Bus.$emit('Loading', false);
        })
      },
      //当前时间
      getNowTime() {
        let str = moment().format('YYYY-MM-DD');
        let week = Number(moment().day());
        switch (week) {
          case 1: {
            str += ' 星期一';
            break;
          }
          case 2: {
            str += ' 星期二';
            break;
          }
          case 3: {
            str += ' 星期三';
            break;
          }
          case 4: {
            str += ' 星期四';
            break;
          }
          case 5: {
            str += ' 星期五';
            break;
          }
          case 6: {
            str += ' 星期六';
            break;
          }
          case 7: {
            str += ' 星期日';
            break;
          }
          default: {
            str += ' 星期日';
            break;
          }
        }
        let hour = moment().format('HH:mm');
        str += '  ' + hour;
        this.nowTime = str;
      },
      //保存
      saveAssembly() {
        this.$emit('saveAssembly')
      },
      //取消
      cancelAssembly() {
        this.$emit('cancelAssembly')
      }
    }
  }
</script>
